/*
    Copyright 2017, China Mobile Co., Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

#login_container {
    text-align: left;
    margin: 0;
    padding: 0;
    margin: 0 auto;
    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
}

@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('/openoui/thirdparty/fonts/fontomas-webfont.eot');
    src: url('/openoui/thirdparty/fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('/openoui/thirdparty/fonts/fontomas-webfont.woff') format('woff'),
         url('/openoui/thirdparty/fonts/fontomas-webfont.ttf') format('truetype'),
         url('/openoui/thirdparty/fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranchiseRegular';
    src: url('/openoui/thirdparty/fonts/franchise-bold-webfont.eot');
    src: url('/openoui/thirdparty/fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/openoui/thirdparty/fonts/franchise-bold-webfont.woff') format('woff'),
         url('/openoui/thirdparty/fonts/franchise-bold-webfont.ttf') format('truetype'),
         url('/openoui/thirdparty/fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

a.hiddenanchor {
    display: none;
}

#wrapper {
    right: 0px;
    min-height: 560px;
    margin: 0px auto;
    width: 500px;
    position: relative;
}

#wrapper a {
    color: rgb(95, 155, 198);
    text-decoration: underline;
}

#wrapper p {
    margin-bottom: 15px;
}

#wrapper p:first-child {
    margin: 0px;
}

#wrapper label {
    color: rgb(64, 92, 96);
    position: relative;
}

::-webkit-input-placeholder {
    color: rgb(190, 188, 188);
    font-style: italic;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: rgb(190, 188, 188);
    font-style: italic;
}

input {
    outline: none;
}

#wrapper input:not([type="checkbox"]) {
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;
    border: 1px solid rgb(178, 178, 178);
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing : content-box;
    box-sizing : content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus {
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}

#wrapper p.button input {
    width: 30%;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#wrapper p.button input:hover {
    background: rgb(74, 179, 198);
}

#wrapper p.button input:active,
#wrapper p.button input:focus {
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

p.login.button,
p.signin.button {
    text-align: right;
    margin: 5px 0;
}

.keeplogin {
    margin-top: -5px;
}

.keeplogin input,
.keeplogin label {
    display: inline-block;
    font-size: 12px;
    font-style: italic;
}

.keeplogin input#loginkeeping {
    margin-right: 5px;
}

.keeplogin label {
    width: 80%;
}

p.change_link {
    position: absolute;
    color: rgb(127, 124, 124);
    left: 0px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    background: rgb(225, 234, 235);
}

#wrapper p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

#wrapper p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}

#wrapper p.change_link a:active {
    position: relative;
    top: 1px;
}

#register,
#login {
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 10px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, 0.8);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    filter: alpha(opacity=85);
    opacity: 0.85;
}

#register {
    z-index: 21;
    opacity: 0;
}

#login {
    z-index: 22;
}

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login {
    z-index: 22;
    -webkit-animation-delay: .6s;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-delay: .6s;
    -moz-animation-timing-function: ease-in;
    -o-animation-delay: .6s;
    -o-animation-timing-function: ease-in;
    -ms-animation-delay: .6s;
    -ms-animation-timing-function: ease-in;
    animation-delay: .6s;
    animation-timing-function: ease-in;
    -webkit-animation-name: scaleIn;
    -moz-animation-name: scaleIn;
    -ms-animation-name: scaleIn;
    -o-animation-name: scaleIn;
    animation-name: scaleIn;
}

#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register {
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: scaleOut;
    -moz-animation-name: scaleOut;
    -ms-animation-name: scaleOut;
    -o-animation-name: scaleOut;
    animation-name: scaleOut;
}

.animate {
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 0.5s;
    -moz-animation-fill-mode: both;
    -o-animation-duration: 0.5s;
    -o-animation-fill-mode: both;
    -ms-animation-duration: 0.5s;
    -ms-animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.lt8 #wrapper input {
    padding: 10px 5px 10px 32px;
    width: 92%;
}

.lt8 #wrapper input[type=checkbox] {
    width: 10px;
    padding: 0;
}

.lt8 #wrapper h1 {
    color: #066A75;
}

.lt8 #register {
    display: none;
}

.lt8 p.change_link,
.ie9 p.change_link {
    position: absolute;
    height: 90px;
    background: transparent;
}
